<template>
  <div>
    <Modal
      v-model="showModal"
      :title="title"
      :styles="styles.modalStyle"
      :mask-closable="false"
      scrollable
      class="edit-container"
      @on-visible-change="close"
    >
      <vue-scroll class="form-scroll" :ops="scrollOptions" :style="styles.scrollStyle">
        <div class="text">{{content}}</div>
      </vue-scroll>
      <div slot="footer">
        <slot name="footer">
          <div class="btn-container">
            <Button v-if="showOk" type="primary" @click="ok">确认</Button>
            <Button v-if="showCancel" @click="close">{{cancelText}}</Button>
          </div>
        </slot>
      </div>
    </Modal>
  </div>
</template>

<script>
export default {
  props: {
    showOk: {
      type: Boolean,
      default: true
    },
    showCancel: {
      type: Boolean,
      default: false
    },
    cancelText: {
      type: String,
      default: '取消'
    },
    title: {
      type: String
    },
    content: {
      type: String
    },
    width: {
      type: Number,
      default: 600
    },
    height: {
      type: Number,
      default: 500
    }
  },
  data() {
    return {
      styles: this.util.getModalStyle(this.width, this.height),
      showModal: true
    }
  },
  methods: {
    close() {
      this.$emit('update:show', false)
    },
    ok() {
      this.close()
      this.$emit('ok')
    }
  }
}
</script>

<style lang="less" scoped>
.text {
  white-space: pre-wrap;
}
</style>